// import './Header.css'
// import React ,{Component,Fragment} from 'react';
// // todolist header部分
// function Headers(props){
//  let addTodo = (e)=>{
//     const todo = e.target.value;
//     console.log(e.target.value)
//     if(e.keyCode !== 13 || todo == "") return;
//     // this.props.addTodo(todo);
//     e.target.value=""
//   }
//   return (
    
//     <header>
//       <section>
//         <h1>ToDoList</h1>
//         <div className='input'>
//         <input onKeyUp={addTodo} type="text" placeholder='请输入待办事项' />
//         </div>
        
//       </section>
//     </header>
    
//   )
// }
// export default Headers;

import React, { Component } from 'react';
import "./Header.css";
export default class Header extends Component {
  addTodo = (event) => {
    const todo = event.target.value;
    if(event.keyCode !== 13 || todo === "") return;
    this.props.addTodo(todo);
    event.target.value = ""
  }
  render() {
    return (
      <div className="header-wrapper">
        <input onKeyUp={this.addTodo} type="text" name="item" id="itemInput" placeholder="Enter your task, press ENTER to add." />
      </div>
    );
  }
}
